<template>
  <div class="home pos-re">
    <div>
      <!--      头部-->
      <div class="flex header align-center">
        <div class="flex-sub left">
          <img src="../assets/imgs/logo.png" >
          <img src="../assets/imgs/xsqg.png" >
        </div>
        <div class="flex-sub flex justify-end right align-center">
          <div>
            <img src="../assets/imgs/phone.png" >
          </div>
          <div class="margin-left-10">
            <span class="xxrx dis-block text-center">全国咨询热线</span>
            <span class="phone dis-block">136-0305-0981</span>
          </div>
        </div>
      </div>
      <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-row v-for="(route,index) in $router.options.routes" :key="index" class="flex padding-lr-xl">
          <template v-if="route.hidden !== true">
            <el-col v-for="(item,cIndex) in route.children" :key="cIndex" class="flex-sub">
              <!--            <div v-if="route.hidden !== true">-->
              <el-menu-item :index="item.path" :class="tabName === item.path ? 'tab-sel' : ''" >
                <img src="../assets/imgs/heart.png" class="margin-right-5">
                <span style="font-size: 18px;" :style="{color: tabName === item.path ? '#fff' : ''}">{{item.meta.title}}</span>
              </el-menu-item>
              <!--            </div>-->
            </el-col>
          </template>

        </el-row>
      </el-menu>
      <div>
        <router-view />
      </div>
    </div>

    <div class="pos-foot">
      <wz-footer></wz-footer>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

import WzFooter from "@/components/WzFooter";
export default {
  name: "Home",
  data(){
    return{
      tabName: ''
    }
  },
  created() {
    this.tabName = this.$route.path.split('/')[1]
  },
  methods: {
    handleSelect(key, keyPath) {
      this.tabName = key

      this.$router.replace(key)

      if (key === 'appxz' && this.$store.xzQrCodeDisplay === false){
        this.$store.commit('SET_XZQRCODEDISPLAY')
      }
    }
  },
  components: {
    WzFooter
  },
};
</script>

<style lang="scss" scoped>

  .width0{
    width: 0;
  }

  .home{
    padding-bottom: 116px;
  }

  .tab-sel{
    background-color: #9C5DFB !important;
  }

  .el-main{
    padding: 0;
  }

  .header{
    border-bottom: #9C5DFB 1px solid;
    padding: 20px 30px;
    .left{
      img:nth-child(1){
        width: 78px;
        height: 78px;
      }
      img:nth-child(2){
        width: 189px;
        height: 82px;
        margin-left: 7px;
      }
    }

    .right{


      img{
        width: 40px;
        height: 42px;
      }

      .xxrx{
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 25px;
        letter-spacing: 1px;
      }

      .phone{
        font-size: 22px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #9C5DFB;
        line-height: 26px;
        letter-spacing: 1px;
      }
    }
  }

  .el-header{
    height: auto !important;
    padding: 0 !important;
  }
</style>
